/**
 * @file 响应式布局处理组件
 * @date 2025/11/20 16:08:01
 * @author lyqjob@yeah.net
 * @description 负责监听窗口大小变化，自动调整侧边栏折叠状态
 */
import { useEffect, useRef } from 'react';


const ResponsiveHandler = ({ collapsed, onCollapsedChange }) => {
  const lastWidthRef = useRef(window.innerWidth);
  const isManualOperationRef = useRef(false);

  useEffect(() => {
    // 定义响应式断点常量
    const BREAKPOINT = 1000;
    
    // 检查并设置初始状态
    const checkInitialSize = () => {
      const width = window.innerWidth;
      lastWidthRef.current = width;
      
      // 初始检查：如果当前宽度小于断点且侧边栏是展开的，则自动折叠
      if (width < BREAKPOINT && !collapsed) {
        onCollapsedChange(true);
      }
      // 如果当前宽度大于等于断点且侧边栏是折叠的，则自动展开
      else if (width >= BREAKPOINT && collapsed) {
        onCollapsedChange(false);
      }
    };
    
    // 立即检查初始状态
    checkInitialSize();
    
    // 检查窗口大小变化
    const checkWindowSize = () => {
      const width = window.innerWidth;
      const lastWidth = lastWidthRef.current;
      
      // 只有在窗口大小变化时才自动调整
      if (width !== lastWidth) {
        // 如果窗口从小于断点变为大于断点，且当前是折叠状态，则自动展开
        if (lastWidth < BREAKPOINT && width >= BREAKPOINT && collapsed) {
          onCollapsedChange(false);
        }
        // 如果窗口从大于断点变为小于断点，且当前是展开状态，则自动折叠
        else if (lastWidth >= BREAKPOINT && width < BREAKPOINT && !collapsed) {
          onCollapsedChange(true);
        }
        
        lastWidthRef.current = width;
      }
    };
    
    // 创建防抖处理函数
    let resizeTimer;
    const handleResize = () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(checkWindowSize, 300);
    };

    // 添加事件监听器
    window.addEventListener('resize', handleResize, { passive: true });
    
    // 清理函数
    return () => {
      clearTimeout(resizeTimer);
      window.removeEventListener('resize', handleResize, { passive: true });
    };
  }, []); // 移除 collapsed 和 onCollapsedChange 依赖，避免重复触发

  // ResponsiveHandler 是纯逻辑组件，不渲染任何 UI
  return null;
};

export default ResponsiveHandler;